<template>
  <div class="scores-detail">
    <h1 style="font-size: 16px;text-align: center;">{{ examName }}</h1>
    <!-- 输入班级名搜索框 -->
    <input
        class="class-search-input"
        type="text"
        v-model="searchClassName"
        placeholder="输入班级名搜索"
    />

    <!-- 表格 -->
    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>总分</th>
        <th>班级排名</th>
        <th>年级排名</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="student in filteredStudents" :key="student.studentName">
        <td>{{ student.studentName }}</td>
        <td>{{ student.chinese.toFixed(2) }}</td>
        <td>{{ student.math.toFixed(2) }}</td>
        <td>{{ student.english.toFixed(2) }}</td>
        <td>{{ student.totalScore.toFixed(2) }}</td>
        <td>{{ student.classRank }}</td>
        <td>{{ student.gradeRank }}</td>
      </tr>
      </tbody>
    </table>

    <button class="download-btn" @click="downloadExcel">
      <img src="/src/assets/icons/download.png" alt="Download" class="download-icon" />下载
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import * as XLSX from 'xlsx';
const route = useRoute();
const examName = ref('');
const students = ref([]);
const searchClassName = ref(''); // 绑定输入框的班级名
const headers = [{
  className: '班级',
  studentId: '学号',
  studentName: '姓名',
  chinese: '语文',
  math: '数学',
  english: '英语',
  totalScore: '总分',
  classRank: '班级排名',
  gradeRank: '年级排名'
}];
onMounted(async () => {
  const examId = route.query.examId; // 获取 examId
  examName.value = route.query.examName;
  try {
    // 使用 axios.get 方法从后端获取该场考试的所有学生的成绩
    const response = await axios.get(`/api/totalScore/exam/${examId}`);
    console.log(response.data);
    students.value = response.data;

  } catch (error) {
    console.error('Failed to fetch exam data:', error);
  }
});

// 计算属性，根据 searchClassName 过滤学生数据
const filteredStudents = computed(() =>
    students.value.filter(student =>
        student.className.includes(searchClassName.value)
    )
);

const downloadExcel = () => {
  // 将 headers 数组转换为表头行
  const headersArray = Object.values(headers[0]);
  // 准备数据行，这里跳过了表头，因为我们已经手动添加了
  const dataRows = students.value.map(student => {
    return [
      student.className,
      student.studentId,
      student.studentName,
      student.chinese,
      student.math,
      student.english,
      student.totalScore,
      student.classRank,
      student.gradeRank
    ];
  });
  // 将表头和数据行合并为一个完整的数组
  const worksheetData = [headersArray, ...dataRows];

  // 利用合并后的数组创建工作表
  const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
  const workbook = XLSX.utils.book_new();
  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Scores');
  XLSX.writeFile(workbook, `${examName.value}.xlsx`);
};



</script>

<style scoped>
.class-search-input {
  margin: 10px 0;
  padding: 8px;
  width: 200px; /* 可根据需要调整 */
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.scores-detail {
  padding: 10px;
  font-family: Arial, sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 使用固定布局以保持列宽一致 */
}

th, td {
  border: 1px solid #ddd;
  padding: 2px; /* 根据需要调整内边距 */
  font-size: 8px; /* 根据需要调整字体大小 */
  white-space: nowrap; /* 防止文本换行 */

}

th {
  background-color: #f2f2f2;
}



/* 媒体查询：对于较小的屏幕，进一步减小字体大小和内边距 */
@media (max-width: 768px) {
  th, td {
    padding: 5px;
    font-size: 10px;
  }
}
.scores-detail {
  padding: 10px;
  font-family: Arial, sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

.download-btn {
  position: fixed; /* 使用 fixed 定位 */
  right: 20px; /* 距离右侧20px */
  bottom: 50px; /* 距离底部20px */
  padding: 5px 15px;
  font-size: 14px;
  cursor: pointer;


  border: none; /* 无边框 */
  border-radius: 50px; /* 圆角边框 */

}



.download-icon {
  width: 20px; /* 图标宽度，根据需要调整 */
  height: 20px; /* 图标高度，根据需要调整 */
  margin-right: 5px; /* 图标与文字之间的间距 */
  vertical-align: middle; /* 垂直居中对齐 */
}

</style>
